<template>
  <div class="accounting-box">
    <content-title
      titleTop="Enterprise accounting and tax reporting"
      title="公司记账报税"
      titleTips="2000+名会计师、注册会计师、注册税务师全力为您创业护航"
    ></content-title>
    <div class="maintenance-content">
      <div
        class="main-flex"
        v-for="(item, index) in showListData"
        :key="index + 'buss'"
      >
        <buy-version
          :item="item"
          bg="white"
          @onBuyClick="onBuyClick"
        ></buy-version>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed } from "vue";
import contentTitle from "../content-title/content-title.vue";
import buyVersion from "../buy-version/buy-version.vue";
import type { BuyVersion } from "../buy-version/types";
interface Events {
  (e: "onBuyClick", value: BuyVersion): void;
}
interface Props {
  /**数据列表  */
  list: any;
}
const props = withDefaults(defineProps<Props>(), {
  list: [],
});
const emits = defineEmits<Events>();
const versionList: BuyVersion[] = reactive([
  {
    versionName: "小规模零申报",
    oldPrice: "行业价格600每年",
    price: 200,
    unit: "年",
    versionList: [
      {
        title: "4+1本账",
        tips: "总账+分类明细账+多栏明细账+出纳日记账+企业纳税申报表及财务报表。",
        active: true,
        height: 133,
      },
      {
        title: "上面取票、代购发票",
        tips: "安排上门取票服务或指定快递邮寄发票",
        active: true,
        height: 89,
      },
      {
        title: "一对一专家服务",
        tips: "资深财会记账人员，专业知识强，业务能力全面。不同行业背景可选。",
        active: false,
      },
    ],
  },
  {
    versionName: "小规模记账报税",
    oldPrice: "行业价格1200每年",
    price: 400,
    unit: "年",
    versionList: [
      {
        title: "4+1本账",
        tips: "总账+分类明细账+多栏明细账+出纳日记账+企业纳税申报表及财务报表。",
        active: true,
        height: 133,
      },
      {
        title: "上面取票、代购发票",
        tips: "安排上门取票服务或指定快递邮寄发票",
        active: true,
        height: 89,
      },
      {
        title: "一对一专家服务",
        tips: "资深财会记账人员，专业知识强，业务能力全面。不同行业背景可选。",
        active: true,
      },
    ],
  },
  {
    versionName: "一般纳税人零申报",
    oldPrice: "行业价格1800每年",
    price: 400,
    unit: "年",
    versionList: [
      {
        title: "9+1本账",
        tips: "总账+分类明细账+多栏明细账+现金日记账+银行存款日记账+进销存明细账+销售明细账+固定资产明细账+应交税金 (增值税) 明细账+企业纳税申报表及财务报表",
        active: true,
        height: 133,
      },
      {
        title: "上面取票、代购发票",
        tips: "安排上门取票服务或指定快递邮寄发票",
        active: true,
        height: 89,
      },
      {
        title: "一对一专家服务",
        tips: "资深财会记账人员，专业知识强，业务能力全面。不同行业背景可选。",
        active: true,
      },
    ],
  },
  {
    versionName: "一般纳税人",
    oldPrice: "行业价格2400每年",
    price: 1200,
    unit: "年",
    versionList: [
      {
        title: "9+1本账",
        tips: "总账+分类明细账+多栏明细账+现金日记账+银行存款日记账+进销存明细账+销售明细账+固定资产明细账+应交税金 (增值税) 明细账+企业纳税申报表及财务报表",
        active: true,
      },
      {
        title: "上面取票、代购发票",
        tips: "安排上门取票服务或指定快递邮寄发票",
        active: true,
        height: 89,
      },
      {
        title: "一对一专家服务",
        tips: "资深财会记账人员，专业知识强，业务能力全面。不同行业背景可选。",
        active: true,
      },
    ],
  },
]);

const showListData = computed((): BuyVersion[] => {
  let showList: BuyVersion[] = [];
  if (props.list.length > 0) {
    props.list.forEach((item: any, index: number) => {
      if (versionList[index] && index < 3) {
        let data: BuyVersion = JSON.parse(JSON.stringify(versionList[index]));
        data.versionName = item.name;
        data.price = item.price;
        data.id = item.id;
        showList.push(data);
      }
    });
    // showList.push(versionList[3]);
  } else {
    showList.push(...versionList);
  }
  return showList;
});

const onBuyClick = (item: BuyVersion) => {
  emits("onBuyClick", item);
};
</script>
<style lang="less">
@import "@/style/var.less";
@media (min-width: 750px) {
  .accounting-box {
    margin-top: 47px;
    .main-flex:frist-child {
      margin-left: 0px;
    }
    .main-flex {
      flex: 1;
      margin-left: 9px;
    }
  }
}
@media (max-width: 750px) {
  .accounting-box {
    padding: 0 8px;

    .maintenance-content {
      // margin-top: 3px;
      .main-flex:frist-child {
        margin-top: 0px;
      }
      .main-flex {
        margin-top: 35px;
      }
    }
  }
}
</style>
